<template>
    <div class="add-file">
        <ContentWrap>
            <h3>上传文件</h3>
            <div>
                <div>
                    <el-form :rules="rules" ref="ruleForm" :model="addfile">
                        <div style="display: flex;">
                            <el-form-item label="选择文件:" prop="file">
                                <el-upload v-model="addfile.file" class="upload-demo" ref="upload" accept=".doc,.docx"
                                    action="" :http-request="uploadFile" limit="1">
                                    <el-button type="primary">选择文件</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="文件类型:" prop="fileTypeId"
                                style="display: flex; align-items: center;margin-left: 300px;">
                                <el-select class="!w-200px" v-model="addfile.fileTypeId" clearable
                                    placeholder="请选择报告类型">
                                    <el-option v-for="item in typeList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="关联地震:" prop="earthquake">
                                <el-button type="primary" @click="showEject">
                                    选择地震
                                </el-button>
                                <div style="margin-left: 10px; font-size: 14px;" v-if="addfile.fileName">
                                    {{ addfile.fileName }}
                                </div>
                                <div style="margin-left: 10px; font-size: 14px; color:red;" v-else>请选择关联地震:</div>
                                <el-drawer v-model="showState" size="30%">
                                    <div style="display: flex; justify-content: space-between">
                                        <span style="font-size: 24px; color: #000; font-weight: 700">近期地震</span>
                                        <el-input v-model="input1" style="width: 200px" placeholder="请输入"
                                            :suffix-icon="Search" @change="selectByName(input1)" />
                                    </div>
                                    <div style="margin-top: 10px;">
                                        <el-tabs type="card" class="demo-tabs" v-model="activeName"
                                            @tab-click="handleTabClick">
                                            <el-tab-pane label="正式" name="1">
                                                <div style="display: flex; align-items: center;">
                                                    <el-date-picker v-model="timeValue" style="width: 200px;"
                                                        type="daterange" align="right" unlink-panels range-separator="~"
                                                        start-placeholder="开始日期" end-placeholder="结束日期"
                                                        @change="selectByTimeRange()"></el-date-picker>
                                                    <el-radio-group style="margin-left: 6px;" v-model="area"
                                                        @change="handleChange">
                                                        <el-radio style="margin: 0 4px;" value="1"
                                                            size="large">全部</el-radio>
                                                        <el-radio style="margin: 0 4px;" value="2"
                                                            size="large">国内</el-radio>
                                                    </el-radio-group>
                                                    <el-button type="primary" size="small" style="margin-left: 8px;"
                                                        @click="toggleShowDom">
                                                        更多
                                                    </el-button>
                                                </div>
                                                <div style="display: flex; justify-content: space-between;margin-top: 10px;"
                                                    v-show="showDom">
                                                    <div style="display: flex;">
                                                        <el-form-item label="震级:">
                                                            <el-input v-model="stat" style="width: 120px"
                                                                @change="selectBetween()" placeholder="请输入" />
                                                        </el-form-item>
                                                        <span style="margin: 0 4px;">至</span>
                                                        <el-form-item>
                                                            <el-input v-model="end" style="width: 120px"
                                                                @change="selectBetween()" placeholder="请输入" />
                                                        </el-form-item>
                                                    </div>
                                                    <div>
                                                        <el-button type="primary" @click="switchOrder">时间倒序 </el-button>
                                                    </div>
                                                </div>
                                                <div style="margin-top: 20px;">
                                                    <div style="display: flex; align-items: center; border: 1px solid #eaeaea;"
                                                        v-for="item in datalist" :key="item.id"
                                                        @click="handleClick({ id: item.id, name: item.title })">
                                                        <div
                                                            style="font-size: 18px;color: #3560F6; width: 50px; height: 50px; background-color: rgba(53, 96, 246, .1);line-height: 50px;text-align: center;margin-left: 20px;border: 1px solid #3560F6;border-radius: 10px;">
                                                            {{ item.earthquakeMagnitude }}</div>
                                                        <div style="margin-left: 20px;">
                                                            <div style="font-size: 16px; color: #333333;">{{
                                                                item.referenceLocation }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                {{ item.earthquakeTime }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                <span>经度: {{ item.longitude }}</span><span
                                                                    style="margin: 0 14px;">纬度:
                                                                    {{ item.latitude }}</span><span>深度: {{
                                                                    item.depth }}Km</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    style="display: flex; margin-top: 30px; justify-content: flex-end;">
                                                    <el-button size="large" @click="close">取消</el-button>
                                                    <el-button type="primary" size="large"
                                                        @click="determine">确认</el-button>
                                                </div>
                                            </el-tab-pane>
                                            <el-tab-pane label="测试" name="2">
                                                <div style="display: flex; align-items: center;">
                                                    <el-date-picker v-model="timeValue" style="width: 200px;"
                                                        type="daterange" align="right" unlink-panels range-separator="~"
                                                        start-placeholder="开始日期" end-placeholder="结束日期"
                                                        @change="selectByTimeRange()"></el-date-picker>
                                                    <el-radio-group style="margin-left: 6px;" v-model="area"
                                                        @change="handleChange">
                                                        <el-radio style="margin: 0 4px;" value="1"
                                                            size="large">全部</el-radio>
                                                        <el-radio style="margin: 0 4px;" value="2"
                                                            size="large">国内</el-radio>
                                                    </el-radio-group>
                                                    <el-button type="primary" size="small" style="margin-left: 8px;"
                                                        @click="toggleShowDom">
                                                        更多
                                                    </el-button>
                                                </div>
                                                <div style="display: flex; justify-content: space-between;margin-top: 10px;"
                                                    v-show="showDom">
                                                    <div style="display: flex;">
                                                        <el-form-item label="震级:">
                                                            <el-input v-model="stat" @change="selectBetween()"
                                                                style="width: 120px" placeholder="请输入" />
                                                        </el-form-item>
                                                        <span style="margin: 0 4px;">至</span>
                                                        <el-form-item>
                                                            <el-input v-model="end" @change="selectBetween()"
                                                                style="width: 120px" placeholder="请输入" />
                                                        </el-form-item>
                                                    </div>
                                                    <div>
                                                        <el-button type="primary" @click="switchOrder">时间倒序 </el-button>
                                                    </div>
                                                </div>
                                                <div style="margin-top: 20px;">
                                                    <div style="display: flex; align-items: center; border: 1px solid #eaeaea;"
                                                        v-for="item in datalist" :key="item.id"
                                                        @click="handleClick({ id: item.id, name: item.title })">
                                                        <div
                                                            style="font-size: 18px;color: #3560F6; width: 50px; height: 50px; background-color: rgba(53, 96, 246, .1);line-height: 50px;text-align: center;margin-left: 20px;border: 1px solid #3560F6;border-radius: 10px;">
                                                            {{ item.earthquakeMagnitude }}</div>
                                                        <div style="margin-left: 20px;">
                                                            <div style="font-size: 16px; color: #333333;">{{
                                                                item.referenceLocation }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                {{ item.earthquakeTime }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                <span>经度: {{ item.longitude }}</span><span
                                                                    style="margin: 0 14px;">纬度:
                                                                    {{ item.latitude }}</span><span>深度: {{
                                                                    item.depth }}Km</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    style="display: flex; margin-top: 30px; justify-content: flex-end;">
                                                    <el-button type="primary" size="large"
                                                        @click="determine">保存</el-button>
                                                    <el-button size="large" @click="close">关闭</el-button>
                                                </div>
                                            </el-tab-pane>
                                            <el-tab-pane label="演练" name="3">
                                                <div style="display: flex; align-items: center;">
                                                    <el-date-picker v-model="timeValue" style="width: 200px;"
                                                        type="daterange" align="right" unlink-panels range-separator="~"
                                                        start-placeholder="开始日期" end-placeholder="结束日期"
                                                        @change="selectByTimeRange()"></el-date-picker>
                                                    <el-radio-group style="margin-left: 6px;" v-model="area"
                                                        @change="handleChange">
                                                        <el-radio style="margin: 0 4px;" value="1"
                                                            size="large">全部</el-radio>
                                                        <el-radio style="margin: 0 4px;" value="2"
                                                            size="large">国内</el-radio>
                                                    </el-radio-group>
                                                    <el-button type="primary" size="small" style="margin-left: 8px;"
                                                        @click="toggleShowDom">
                                                        更多
                                                    </el-button>
                                                </div>
                                                <div style="display: flex; justify-content: space-between;margin-top: 10px;"
                                                    v-show="showDom">
                                                    <div style="display: flex;">
                                                        <el-form-item label="震级:">
                                                            <el-input v-model="stat" @change="selectBetween()"
                                                                style="width: 120px" placeholder="请输入" />
                                                        </el-form-item>
                                                        <span style="margin: 0 4px;">至</span>
                                                        <el-form-item>
                                                            <el-input v-model="end" @change="selectBetween()"
                                                                style="width: 120px" placeholder="请输入" />
                                                        </el-form-item>
                                                    </div>
                                                    <div>
                                                        <el-button type="primary" @click="switchOrder">时间倒序 </el-button>
                                                    </div>
                                                </div>
                                                <div style="margin-top: 20px;">
                                                    <div style="display: flex; align-items: center; border: 1px solid #eaeaea;"
                                                        v-for="item in datalist" :key="item.id"
                                                        @click="handleClick({ id: item.id, name: item.title })">
                                                        <div
                                                            style="font-size: 18px;color: #3560F6; width: 50px; height: 50px; background-color: rgba(53, 96, 246, .1);line-height: 50px;text-align: center;margin-left: 20px;border: 1px solid #3560F6;border-radius: 10px;">
                                                            {{ item.earthquakeMagnitude }}</div>
                                                        <div style="margin-left: 20px;">
                                                            <div style="font-size: 16px; color: #333333;">{{
                                                                item.referenceLocation }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                {{ item.earthquakeTime}}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                <span>经度: {{ item.longitude }}</span><span
                                                                    style="margin: 0 14px;">纬度:
                                                                    {{ item.latitude }}</span><span>深度: {{
                                                                    item.depth}}Km</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    style="display: flex; margin-top: 30px; justify-content: flex-end;">
                                                    <el-button type="primary" size="large"
                                                        @click="determine">保存</el-button>
                                                    <el-button size="large" @click="close">关闭</el-button>
                                                </div>
                                            </el-tab-pane>
                                            <el-tab-pane label="自动" name="4">
                                                <div style="display: flex; align-items: center;">
                                                    <el-date-picker v-model="timeValue" style="width: 200px;"
                                                        type="daterange" align="right" unlink-panels range-separator="~"
                                                        start-placeholder="开始日期" end-placeholder="结束日期"
                                                        @change="selectByTimeRange()"></el-date-picker>
                                                    <el-radio-group style="margin-left: 6px;" v-model="area"
                                                        @change="handleChange">
                                                        <el-radio style="margin: 0 4px;" value="1"
                                                            size="large">全部</el-radio>
                                                        <el-radio style="margin: 0 4px;" value="2"
                                                            size="large">国内</el-radio>
                                                    </el-radio-group>
                                                    <el-button type="primary" size="small" style="margin-left: 8px;"
                                                        @click="toggleShowDom">
                                                        更多
                                                    </el-button>
                                                </div>
                                                <div style="display: flex; justify-content: space-between;margin-top: 10px;"
                                                    v-show="showDom">
                                                    <div style="display: flex;">
                                                        <el-form-item label="震级:">
                                                            <el-input v-model="stat" @change="selectBetween()"
                                                                style="width: 120px" placeholder="请输入" />
                                                        </el-form-item>
                                                        <span style="margin: 0 4px;">至</span>
                                                        <el-form-item>
                                                            <el-input v-model="end" @change="selectBetween()"
                                                                style="width: 120px" placeholder="请输入" />
                                                        </el-form-item>
                                                    </div>
                                                    <div>
                                                        <el-button type="primary" @click="switchOrder">时间倒序 </el-button>
                                                    </div>
                                                </div>
                                                <div style="margin-top: 20px;">
                                                    <div style="display: flex; align-items: center; border: 1px solid #eaeaea;"
                                                        v-for="item in datalist" :key="item.id"
                                                        @click="handleClick({ id: item.id, name: item.title })">
                                                        <div
                                                            style="font-size: 18px;color: #3560F6; width: 50px; height: 50px; background-color: rgba(53, 96, 246, .1);line-height: 50px;text-align: center;margin-left: 20px;border: 1px solid #3560F6;border-radius: 10px;">
                                                            {{ item.earthquakeMagnitude }}</div>
                                                        <div style="margin-left: 20px;">
                                                            <div style="font-size: 16px; color: #333333;">{{
                                                                item.referenceLocation }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                {{ item.earthquakeTime }}
                                                            </div>
                                                            <div style="font-size: 14px;color: #666666; ">
                                                                <span>经度: {{ item.longitude }}</span><span
                                                                    style="margin: 0 14px;">纬度:
                                                                    {{ item.latitude }}</span><span>深度: {{
                                                                    item.depth}}Km</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    style="display: flex; margin-top: 30px; justify-content: flex-end;">
                                                    <el-button type="primary" size="large"
                                                        @click="determine">保存</el-button>
                                                    <el-button size="large" @click="close">关闭</el-button>
                                                </div>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                </el-drawer>
                            </el-form-item>
                        </div>

                    </el-form>
                </div>

            </div>
            <div style="display: flex; margin-top: 50px; justify-content: center">
                <el-button type="primary" @click="storage">保存</el-button>
                <el-button @click="superior">关闭</el-button>
            </div>
        </ContentWrap>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import router from '@/router'
import { Search } from '@element-plus/icons-vue'
import * as datarApi from "@/api/file";
const area = ref('1')
const activeName = ref('1')
// 搜索
const input1 = ref('')
// 日期
const timeValue = ref([])
// 开始地震
const stat = ref(null)
// 结束地震
const end = ref(null)
const queryParam = ref({
    area: area.value, //区域  0--全部  1--国内  2--国外
    magnitudeType: 0, //震级类型  0--全部  1--3级以下  2--3-5级  3--5-7级  4--7级以上  5--输入的震级
    stat: null, //震级开始
    end: null, //震级结束
    timeType: 0, //时间类型  0--全部  1--最近24小时  2--最近一周  3--最近一个月  4--最近一年  5--自定义的时间
    statTime: '', //开始时间
    endTime: '', //结束时间
    earthquakeType: '1', //地震类型  1--正式地震  2--测试地震  3--演练地震  4--自动地震, 手动触发默认是2 测试地震
    referenceLocation: '', //可以根据 震级、发震时刻、经度、纬度、震源深度、参考位置进行 模糊查询，这里用参考位置字段传参
    pageSize: '',
    pageNo: '',
    sorted: 0
})
const ruleForm = ref(null);
const rules = ref({
    file: [
        { required: true, message: '不能为空', trigger: 'change' }
    ],
    fileTypeId: [
        { required: true, message: '请选择文件类型', trigger: 'change' },
    ],
    earthquake: [
        { required: true, message: '请选择关联地震', trigger: 'change' },
    ],
})

const datalist = ref([])

// 单选
const radioData = ref('1')
// 弹出标识
const showState = ref(false)
const showDom = ref(false);
const addfile = reactive({
    file: '',
    earthquakeId: '',
    fileTypeId: '',
    fileName: '',
    earthquake:''
})
// 文件类型
const typeList = ref([])
// 上传
const uploadFile = (e) => {
    addfile.file = e.file
}



// 获取列表
const getTypeList = async () => {
    try {
        const typeLists = await datarApi.getfileType()
        typeList.value = typeLists[0].children
    }
    catch (error) {
        console.log('失败123');
        // 在这里处理异常
    }
}

// 初始数据
const getListData = async () => {
    try {
        const typeLists = await datarApi.formalEarthquake(queryParam.value)
        datalist.value = typeLists.list
        console.log(datalist.value);
    }
    catch (error) {
        console.log('失败123');
        // 在这里处理异常
    }
}

// 模糊查询
const selectByName = async (name) => {
    console.log(name);
    queryParam.value.referenceLocation = name;
    await getListData(queryParam)
}

//时间处理
const selectByTimeRange = async () => {
    queryParam.value.statTime = formatDateTime(timeValue.value[0])
    queryParam.value.endTime = formatDateTime(timeValue.value[1])
    if (timeValue.value.length > 0) {
        queryParam.value.timeType = 5
        await getListData(queryParam)
    } else {
        await getListData(queryParam)
    }
}

const formatDateTime = (date) => {
    if (!date) return ''; // 如果没有日期，则返回空字符串
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
    const day = String(date.getDate()).padStart(2, '0'); // 获取天数并补零
    return `${year}-${month}-${day}`;
}

//自定义震级区间
const selectBetween = async () => {
    if (stat.value !== null && stat.value !== '' && end.value !== null && end.value !== '') {
        queryParam.value.magnitudeType = 5;
        queryParam.value.stat = stat.value;
        queryParam.value.end = end.value;
        await getListData(queryParam)
    }
}
// 切换时发起请求
const handleTabClick = (tab) => {
    queryParam.value.earthquakeType = tab.props.name
    input1.value = ''
    timeValue.value = []
    stat.value = null
    end.value = null
    queryParam.value.referenceLocation = ''
    queryParam.value.statTime = ''
    queryParam.value.endTime = ''
    queryParam.value.stat = ''
    queryParam.value.end = ''
    queryParam.value.magnitudeType = 0
    queryParam.value.timeType = 0
    getListData()
}
// 切换时获取value
const handleChange = (value) => {
    queryParam.value.area = value
    getListData()
}

// 拿到点击的id值
const handleClick = (val) => {
    addfile.fileName = val.name
    addfile.earthquake = val.name
    addfile.earthquakeId = val.id
    ElMessage({
        message: `已选择: ${addfile.fileName}`,
        type: 'success'
    });
}

// 顺序切换
const switchOrder = () => {
    queryParam.value.sorted = queryParam.value.sorted === 0 ? 1 : 0
    console.log(queryParam.value.sorted);
    getListData()
}
// 弹窗
const showEject = () => {
    showState.value = true
}
// 处理更多切换操作
const toggleShowDom = () => {
    showDom.value = !showDom.value;
    queryParam.value.stat = null
    queryParam.value.end = null
    if (showDom.value) {
        // queryParam.value.stat = null
        // queryParam.value.end = null
        queryParam.value.magnitudeType = 0
    } else {
        if (stat.value == null && stat.value == '' && end.value == null && end.value == '') {
            queryParam.value.magnitudeType = 0
        } else {
            queryParam.value.magnitudeType = 0

        }
    }
};


// 保存
const storage = async () => {
    try {
        const valid = await ruleForm.value.validate();
        if (valid && addfile.fileName) {
            let formdata = new FormData()
            formdata.append('file', addfile.file)
            formdata.append('earthquakeId', addfile.earthquakeId)
            formdata.append('fileTypeId', addfile.fileTypeId)
            formdata.append('earthquakeType', activeName.value)
            formdata.append('earthQuakeName', addfile.fileName)
            const typeLists = await datarApi.upAddfile(formdata)
            if (typeLists == 1) {
                router.push({ path: '/produce/produce/file' })
            }
        }
    }
    catch (error) {
        console.log('失败123');
        // 在这里处理异常
    }
}

// 关闭
const close = () => {
    showState.value = false
}

// 关闭
const superior = () => {
    router.push({ path: '/produce/produce/file' })
}
// 取消
const cancel = () => {
    console.log('取消');

}
// 确定
const determine = () => {
    getListData()
    showState.value = false
}
onMounted(() => {
    getTypeList()
    getListData()
})
</script>

<style scoped>
.add-file {
    /* background-color: #f0f2f5; */
    padding: 10px;
}
</style>
